<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <style type="text/css">
    body{
        background-image:url()
        background-repeat: no repeat;
        background-size: cover;
        background-color: #CCCCCC;

    }
    #user_reg{
        font-family:微软雅黑;
        font-size: 40px;
        text-align:center;
        margin-top:200px;

    }
    from{
        width:500px;
        margin:40px;
        font-size: 25px;
    }
    input{
        height: 30px;
        width: 12em;
        margin-top: 5px;
        margin-bottom:5px;
    }
     input[type="submit"],input[type="reset"]{
         height:30px;
         width:12em;
         margin-top:5px；
         margin-left: 6px;

     }
   </style>
</head>

    <script>
        //邮箱验证
        function validate_username(username){
            //定义正则表达式的变量：邮箱正则
            var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            //console.log(username);
            if(username!=""&&username.search(emailReg)!= -1)
            {
                document.getElementById("test_user").innerHTML="<font color='red' size='3px'>邮箱格式正确</font>";

            }else{
                document.getElementById("test_user").innerHTML="<font color='red' size='3px'>邮箱格式错误</font>";

            }
        }
        //2.验证密码是否符合要求：匹配6位密码，由数字和字母组成：
        function vaildate_password(password){
            var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
            if(password!=""&&password.search(passwordReg)!=-1)
            {
                document.getElementById("test_pw").innerHTML="<font cloor='red' size='3px' >√密码格式正确</font>";

            }else{
                document.getElementById("test_pw").innerHTML="<font color='red' size='3px'>密码格式错误</font>"
                alert("密码有6位，由数字和字母组成！");
            }
        }
        //3.验证两次输入的密码是否一样
        function vaildate_password2(password2){
            var password=document.getElementById("password").value;
            if(password==""){
                document.getElementById("is_test_pw").innerHTML="<font color='red' size='3px'>密码不能为空</font>";

            }else if(password==password2){
                document.getElementById("is_test_pw").innerHTML="<font color='3px' size='3px'>√两次输入的密码相同</font>";

            }else{
                document.getElementById("is_test_pw").innerHTML="<font color='3px' size='3px'>两次输入的密码不相同</font>";
                console.log("密码由6位，由数字和字母组成！");
            }
        }
        //4.验证表单是否已经写好
        function validate_form(){
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var password2 = document.getElementById("password2").value;

            var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
            if(username!=""&&emailReg.test(username)){
                if(password!=""&&passwirdReg.test(password)){
                    if(password2==password){
                        alert("信息填写正确，可以正常提交！");
                        console.log("信息填写正确，可以正常提交！");
                        return true;
                    }else{
                        alert("密码不一致，提交失败！，请重新填写！");
                        console.log("密码不一致，提交失败，请重新填写！");
                        return false;
                    }
                }else{
                    alert("密码格式错误，提交失败，请重新填写！");
                    console.log("密码格式错误，提交失败，请重新填写！");
                    return false;

                }
            }else{
                alert("注册的账号不符合要求，提交失败，请重新填写！");
                console.log("注册的账号不一致，提交失败，请重新填写！");
                return false;
            }
        }
        </script>
<body>
    <div id="user_reg">用户注册：</div>
    <form action="./serlet/RegisterSerlet" method="post" name="form">
        <table>
            <tr>
                <td>请输入账号：</td>
                <td><input type="text" id="username" name="username" placeholder="只能用邮箱注册" onblur="validate_username(this.value)"/></td>
                <td id="test_user"></td>
                </tr>
             <tr>
                 <td>请输入密码：</td>
                 
                 <td><input type="password" id="password" name="password" placeholder="6位密码由数字和字母组成" onblur="validate_password(this.value)"/></td>
                 </tr>
                 <tr>
                     <td>请确认密码：</td>
                     <td><input type="password" id="password2" name="password2" onblur="validate_password2(this.value)"/></td>
                     <td id="is_test_pw"></td>
                     </tr>
                <tr>
                    <td><input type="submit" id="submit form" value="注册" onclick="return vaildate_form()"/>
                        <td id="is_test_pw"></td>
                        </td>
                </tr>
                </table>
    </form>
                        
</body>
</html>